<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery.cookie.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">   
  <link rel="stylesheet" href="css/nav.css">
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 通过阿里巴巴引入外部图标 */
    @font-face {
    font-family: 'iconfont';  /* project id 3326910 */
    src: url('');
    src: url('?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.woff') format('woff'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.ttf') format('truetype'),
    url('#iconfont') format('svg');
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  .tab-content{
    height: 600px;
    width: 100%;
    /* background-color: rgb(168, 34, 34); */

  }
  .function-area{
    position: relative;
    float: left;
    height: 600px;
    width: 50%;
    /* background-color: aqua; */
  }
  .function-area input{
    width: 300px;
  }
  .note-area{
    position: relative;
    float: left;
    height: 600px;
    width: 50%;
    /* background-color: bisque; */
  }
  .book-content{
    width: 100%;
  }
  .book-window{
      margin: 20px 0;
      width: 100%;
      height: 180px;
      background-color: rgb(199, 199, 199);
      border-radius: 20px;
      transition: all 0.1s ease-in 0.1s;
      padding: 10px 20px;
    }
    .book-window:hover{
      box-shadow:  17px 17px 34px #bebebe,
                  -17px -17px 34px #ffffff;
    }
    .book-window img{
      height: 160px;
    }
    .book-image {
      position: relative;
      float: left;
      margin-left: 10px;
    }
    .book-info{
      position: relative;
      float: left;
      margin-left: 10px;

    }
    .book-info-base{
      top: 0;
      width: 100%;
      height: 100%;
      /* background-color: #045388; */
      z-index: 4;
    }
    .book-info-brief{
      top: 0;
      z-index: 3;
    }
    .book-name{
      font-size: 24px;
    }
    .book-info-top{
      z-index: 4;
    }
    .book-info-buttom{
      z-index: 3;
    }
  </style>
</head>
<body>
  <!-- 页面导航 -->
  <nav>
    <ul class="nav justify-content-center nav-pills">
      <li class="nav-item">
        <a class="nav-link " href="index.html">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="usermanage.html">用户信息管理</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="bookmanage.html">图书信息管理</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="borrowmanage.html">借书信息管理</a>
      </li>
    </ul>
  </nav>
  <div class="container">
     <!-- 功能导航栏 -->
     <br><br>
     <!-- 选项卡 -->
     <div>
       <div class="nav nav-tabs" id="nav-tab" role="tablist">
         <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">添加书籍</a>
         <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">修改书籍信息</a>
         <!-- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">删除书籍</a> -->
       </div>
     </div>
     <!-- 选项卡控制的区域 -->
     <div class="tab-content" id="nav-tabContent">
       <!-- 选项卡一：添加用户 -->
       <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
         <br>
         <h3>添加书籍</h3>
         <br>
         <div class="function-area">
           <div class="form-group">
            <label for="account">书籍封面：</label>
                <img src="" alt="" width="100px" height="120px" id="upload-img">
                <input type="file" name="" id="book-image">
              <br><br>
             <label for="account">书籍名：</label>
             <span class="badge badge-primary">必填</span>
             <input type="text" class="form-control" id="book-name" aria-describedby="emailHelp" placeholder="输入书名">
             <br>
             <label for="password">作者：</label>
             <span class="badge badge-primary">必填</span>
             <input type="text" class="form-control" id="book-author" aria-describedby="emailHelp" placeholder="输入作者">
             <br>
             <label for="name">出版社：</label>
             <span class="badge badge-primary">必填</span>
             <input type="text" class="form-control" id="book-press" aria-describedby="emailHelp" placeholder="输入出版社">
             <br>
             <label for="name">价格:</label>
             <span class="badge badge-primary">必填</span>
             <input type="text" class="form-control" id="book-price" aria-describedby="emailHelp" placeholder="输入价格">
             <br>
             <label for="name">数量:</label>
             <span class="badge badge-primary">必填</span>
             <input type="text" class="form-control" id="book-num" aria-describedby="emailHelp" placeholder="输入数量">
           </div>
         </div>
         <div class="note-area">
           <div style="height: 50%;">
             <h4>注意事项</h4>
             <br>
             <p>1、用户姓名、密码为必填项</p>
             <p>2、用户区域号请查询学校各部门所属区号</p>
             <p>3、用户信息默认有效时间为4年，如因保研、学制延长、延毕等原因导致使用时限变长，须再次激活</p>
           </div>
           <div>
             <button id="addbook-submit-btn" type="button" class="btn btn-lg btn-primary">添加书籍</button>
           </div>
         </div>
       </div>
       <!-- 选项卡二：修改书籍信息 -->
       <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
         <br>
         <h3>修改书籍信息</h3>
         <br>
         <div class="input-group mb-3" style="width: 600px;" >
           <div class="input-group-prepend">
             <span class="input-group-text" id="inputGroup-sizing-sm">书名、作者、出版社</span>
           </div>
           <input id="modify-book-keyword" type="text" class="form-control" placeholder="请输入" aria-label="Recipient's username" aria-describedby="button-addon2">
           <div class="input-group-append">
             <button class="btn btn-primary" type="button" id="search-book-btn">查询</button>
           </div>
         </div>
         <div class="book-content">

        </div>
       </div>
       <!-- <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
        <br>
        <h3>删除书籍</h3>
        <br>
        <div class="input-group mb-3" style="width: 600px;" >
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-sm">书名、作者、出版社</span>
          </div>
          <input type="text" class="form-control" placeholder="请输入" aria-label="Recipient's username" aria-describedby="button-addon2">
          <div class="input-group-append">
            <button class="btn btn-primary" type="button" id="search-user-btn">查询</button>
          </div>
          <div class="delete-book-">

          </div>
        </div>
        <div>
       </div>
     </div> -->
  </div>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button> -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">修改书籍信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="account">书籍封面：</label>
              <img src="" alt="" width="100px" height="120px" id="modify-upload-img">
              <input type="file" name="" id="modify-book-image">
            <br><br>
          <label for="account">书籍ID：</label>
          <span class="badge badge-primary">无法修改</span>
          <input type="text" class="form-control" id="modify-book-id" aria-describedby="emailHelp" disabled>
           <label for="account">书籍名：</label>
           <span class="badge badge-primary">必填</span>
           <input type="text" class="form-control" id="modify-book-name" aria-describedby="emailHelp" placeholder="输入书名">
           <br>
           <label for="password">作者：</label>
           <span class="badge badge-primary">必填</span>
           <input type="text" class="form-control" id="modify-book-author" aria-describedby="emailHelp" placeholder="输入作者">
           <br>
           <label for="name">出版社：</label>
           <span class="badge badge-primary">必填</span>
           <input type="text" class="form-control" id="modify-book-press" aria-describedby="emailHelp" placeholder="输入出版社">
           <br>
           <label for="name">价格:</label>
           <span class="badge badge-primary">必填</span>
           <input type="text" class="form-control" id="modify-book-price" aria-describedby="emailHelp" placeholder="输入价格">
           <br>
           <label for="name">数量:</label>
           <span class="badge badge-primary">必填</span>
           <input type="text" class="form-control" id="modify-book-num" aria-describedby="emailHelp" placeholder="输入数量">
           <br>
           <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="modify-book-status">
            <label class="form-check-label" for="exampleCheck1" >可借阅</label>
          </div>
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary modify-book-submit">提交修改</button>
      </div>
    </div>
  </div>
</div>
  <script>

    var booksData=[]
    // 图片上传预览
    $('#book-image').change(function(){
      var file = $("#book-image").get(0).files[0];
      var src=window.URL.createObjectURL(file)
      $('#upload-img').attr('src',src)
    })
    
    // 提交添加书籍信息
    $('#addbook-submit-btn').click(function(){

      
      var fileFormData = new FormData();

      var bkName=$('#book-name').val()
      var bkAuthor= $('#book-author').val()
      var bkPress=$('#book-press').val()
      var bkPrice=$('#book-price').val()
      var bkNum=$('#book-num').val()
      var file = $("#book-image").get(0).files[0];

      fileFormData.append('bkImage',file)
      // 但键值对字段名一致时，可以只写一个
      var baseInfo={
        bkName,
        bkAuthor,
        bkPress,
        bkPrice,
        bkNum
      }
      baseInfo=JSON.stringify(baseInfo)
      fileFormData.append('book',baseInfo)
      $.ajax({
          method: 'POST',
          url: 'http://localhost:8080/AddBookController',
          data: fileFormData,
          // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
          contentType: false,
          // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
          processData: false,
          success: function(res) {
              console.log(res)
          }
      })

    })

    $('#search-book-btn').click(function(){
      var keyWord = $('#modify-book-keyword').val().replaceAll(' ','')
      if(keyWord===''){
        alert("请输入搜索关键词！")
        return;
      }
      // console.log(keyWord);
    //  清除掉页面原来显示的书籍
      $('.book-window').remove()
      // 发送ajax请求
     $.get(
       "http://localhost:8080/QueryBookController",
       {
        bkInfo:keyWord
       },
       function(data,status){
         if(status==='success'){
           data=JSON.parse(data)
           if(data.status===5){
            //  console.log(data.data);
            booksData=data.data
            updataModifyView(booksData)
           }else{
             alert(data.msg)
           }
         }else{
           alert("查询失败")
         }
       })
    })
//  更新搜索结果视图
    function updataModifyView(books){
      $('.book-window').remove()
      for(var i=0;i<books.length;i++){
          // 字符串模板写法 `` ,变量用${变量}
          // PS：如何打出 `` 切换英文输入法，点tab上面esc下面的按键
          var html=`      
        <div class="book-window">
          <div class="book-image">
            <img src="${'http://localhost:8080/' +books[i].bkImageUrl}" alt="封面">
          </div>
          <div class="book-info">
            <div class="book-info-base">
              <p><span class="book-name" >${books[i].bkName}</span> &#160;&#160;&#160;&#160;<span>${books[i].bkAuthor}</span></p>
              <p>出版社：<span>${books[i].bkPress}</span></p>
              <p>价格：<span>${books[i].bkPrice}</span>元 &#160;&#160;&#160;&#160; 数量：<span>${books[i].bkNum}</span> &#160;&#160;&#160;&#160;借阅状态：<span>可借阅</span></p>
              <button type="button" class="btn btn-primary btn-sm modify-book-btn"  >修改书籍</button>
              <button  type="button" class="btn btn-primary btn-sm delete-books-btn">删除书籍</button>
            </div> 
        </div>`
        // <button type="button" class="btn btn-primary btn-sm modify-book-btn" data-toggle="modal" data-target="#exampleModal" >修改书籍</button>
        // 将数据渲染的元素添加到我们用来展示书籍的div中
        $('.book-content').append(html)
      }
    }


    $('.book-content').on("click",'.modify-book-btn',function(e){
      var index=$(e.target.parentNode.parentNode.parentNode).index()
      var willModifyBook=booksData[index]
      // console.log(willModifyBook);
      $('#modify-book-id').val(willModifyBook.bkId)
      $('#modify-book-name').val(willModifyBook.bkName)
      $('#modify-book-author').val(willModifyBook.bkAuthor)
      $('#modify-book-press').val(willModifyBook.bkPress)
      $('#modify-book-price').val(willModifyBook.bkPrice)
      $('#modify-book-num').val(willModifyBook.bkNum)
      $('#modify-upload-img').attr('src','http://localhost:8080/'+willModifyBook.bkImageUrl)
      
      $('#exampleModal').modal()
    })
    $('.modify-book-submit').click(function(){{



      var fileFormData = new FormData();
      var bkId=parseInt($('#modify-book-id').val())
      var bkName=$('#modify-book-name').val()
      var bkAuthor= $('#modify-book-author').val()
      var bkPress=$('#modify-book-press').val()
      var bkPrice=parseFloat($('#modify-book-price').val()) 
      var bkNum=parseInt($('#modify-book-num').val()) 
      var file = $("#modify-book-image").get(0).files[0];
      var bkState=$('#modify-book-status').is(":checked")
      var bkImageUrl=' '
      bkState=bkState?1:0
      fileFormData.append('bkImage',file)
      // 但键值对字段名一致时，可以只写一个
      var baseInfo={
        bkId, 
        bkName,
        bkAuthor,
        bkPress,
        bkPrice,
        bkNum,
        bkState,
        bkImageUrl
      }
      baseInfo=JSON.stringify(baseInfo)
      fileFormData.append('book',baseInfo)
      console.log(fileFormData);
      $.ajax({
          method: 'POST',
          url: 'http://localhost:8080/ChangeBookController',
          data: fileFormData,
          // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
          contentType: false,
          // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
          processData: false,
          success: function(res) {
              console.log(res)
          },
          error:function(e){
            console.log(e);
          }
          
      })
    }})
    // $("input").keyup(function(){
  </script>
</body>
</html>